<!--
 * @Description  : 横向柱状图
 * @Autor        : 杜康
 * @Date         : 2023-04-17 18:47:08 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-22 15:11:52 +0800
-->
<template>
  <VCharts :option="options" :style="{ height: `${chartHeight}px`}" :autoresize="true" />
</template>

<script>
import { getChartColor } from "@/utils/utils.js";
import mixins from "./mixins";
export default {
  name: "HorizontalChart",
  mixins: [mixins],
  props: {},
  data() {
    return {
      chartHeight: 500,
    };
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:41:33 +0800
     */
    init() {
      this.handleHBar();
    },
    /**
     * @description: 处理横向柱状图
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:43:33 +0800
     */
    handleHBar() {
      const { type, typeName, xData, xName, yData, yName, series, min, max } = this.data;
      const legendData = [];
      const seriesData = [];
      series.forEach((serie, sIndex) => {
        const { type, name, data } = serie;
        legendData.push(name);
        const len = data?.length;
        const sLen = series?.length;
        this.chartHeight = len > 5 ? len * sLen * 52 : 400;
        seriesData.push({
          name,
          type,
          data,
          color: getChartColor(sIndex),
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          zlevel: 1,
          barMaxWidth: 15,
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
        });
      });

      this.options = {
        color: ["#3aa1ff", "#4ecb73"],
        grid: {
          left: "60",
          right: "40",
          bottom: "50",
          top: "60",
          containLabel: true,
        },
        legend: {
          top: "20",
          data: legendData,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        xAxis: {
          name: xName,
          nameLocation: "middle", // 可配置
          nameGap: 40,
          nameTextStyle: {
            fontSize: 16,
          },
          show: true,
          type: "value",
          axisLabel: {
            show: true,
            margin: 15,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: [
          {
            name: yName,
            nameLocation: "middle",
            nameGap: 60,
            nameTextStyle: {
              fontSize: 16,
            },
            type: "category",
            axisLabel: {
              show: true,
              margin: 15,
            },
            axisLine: {
              show: true,
            },
            data: yData,
          },
        ],
        series: seriesData,
      };
      // 强制刷新
      this.$forceUpdate();
    },
  },
};
</script>
